<div class="appo-flight-plane">
    <el-form >
        <el-form-item label=""></el-form-item>

    </el-form>
    <!--<input type="checkbox" id="panel-activer">-->
    <div class="panel-parent">
        <div class="side-panel">
            <div>

            </div>
        </div>
        <div class="self ">
            <div class="consume-panel">
                <el-form :inline="true" ref="form" :model="form" label-position="left" >
                <el-form-item label=""  prop="flightInfo.flightInfoId":rules
                        ="[ {required: false, message: '航班号不能为空'}]">
                    <el-select clearable  v-model="form.flightInfo.flightInfoId" filterable placeholder="航班号"   >
                        <el-option
                                v-for="plane in planes"
                                :key="plane.flightInfoId"
                                :label="plane.flightNum"
                                :value="plane.flightInfoId"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="预约日期" >
                    <el-date-picker
                            v-model="form.startDate"
                            type="daterange"
                            align="right"
                            unlink-panels
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions2">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="安排日期" >

                    <el-date-picker
                            v-model="form.endDate"
                            type="daterange"
                            align="right"
                            unlink-panels
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions2">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label=""  class = "transparent">
                    <el-button type="primary" @click="queryAppointment">查询</el-button>
                </el-form-item>
        </el-form>
                <el-row>
                    <el-col :span="24">
                        <div style="color: white;margin-bottom: 30px;margin-left: 40px">
                            <div class="history color-block"></div><div class=" history color-block-title">历史数据</div>
                            <div class="today-plane color-block" ></div><div class="today-plane color-block-title">今日计划</div>
                            <div class="next-day-plane color-block"></div><div class="next-day-plane color-block-title">次日计划</div>
                            <div class="third-day-plane color-block"></div><div class="third-day-plane color-block-title">三日后计划</div>
                            <!--<div class="fourth-day-plane color-block"></div><div class="color-block-title">第四日航班</div>-->
                            <!--<div class="firth-day-plane color-block"></div><div class="color-block-title">五日以后航班</div>-->
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="consume-panel">
                <el-row  type="flex" justify="space-around">
                 <el-col :span="24" >

                        <el-table :data="exportData"   :page-size="20" ref="table2"   border height="350"   :cell-class-name="cellClassName"  :row-class-name="rowClass">
                            <el-table-column prop="appoUnit"  header-align="center" label="出港">
                                <el-table-column prop="flightInfo.flightNum" label="航班号" min-width="90px">
                                </el-table-column>
                                <el-table-column prop="flightInfo.flightType" label="机型" min-width="70px">
                                </el-table-column>
                                <el-table-column prop="flightInfo.flightNo" label="机号" min-width="70px">
                                </el-table-column>
                                <el-table-column  prop="estimatedTime" label="安排时间" width="100px" >
                                </el-table-column>
                                <el-table-column  label="预起" min-width="58px">
                                    <template scope="scope">
                                <span>
                                    {{scope.row.flightPlane&&scope.row.flightPlane.takeOffTime?scope.row.flightPlane.takeOffTime.substr(11,5):""}}
                                </span>
                                    </template>
                                </el-table-column>
                                <el-table-column  label="预落" min-width="58px">
                                    <template scope="scope">
                                <span>
                                    {{scope.row.flightPlane&&scope.row.flightPlane.arriveTime?scope.row.flightPlane.arriveTime.substr(11,5):""}}
                                </span>
                                    </template>
                                </el-table-column>
                                <el-table-column  label="是否中转" min-width="80px">
                                    <template scope="scope">
                                <span>
                                    {{scope.row.appProperty=="中转联程"?"是":"否"}}
                                </span>
                                    </template>
                                </el-table-column>
                                <el-table-column  prop="originating" label="出发地" min-width="114px">
                                </el-table-column>
                                <el-table-column prop="destination" label="目的地" min-width="114px">
                                </el-table-column>

                                <el-table-column prop="appoUnit"  label="预约单位" min-width="110">
                                </el-table-column>
                                <el-table-column prop="appoName"  label="预约人" min-width="110">
                                </el-table-column>
                                <el-table-column  prop="appoDate" label="预约时间" min-width="100px" >
                                </el-table-column>
                                <el-table-column  prop="appoPhoneNum" label="联络人电话" min-width="101px" >
                                </el-table-column>
                                <!--<el-table-column  prop="appoPhoneNum" label="优先级"  min-width="70px" >-->
                                    <!--<template scope="scope">-->
                                        <!--{{new Date(scope.row.appoDate).getTime()-new Date(moment().format("YYYY-MM-DD")).getTime()<0?0:(parseInt(new Date(scope.row.appoDate).getTime()-(new Date(moment().format("YYYY-MM-DD"))).getTime())/1000/3600/24 +1)}}-->
                                    <!--</template>-->
                                <!--</el-table-column>-->
                            </el-table-column>
                            <el-table-column label="操作" fixed="right"   width="100px" >
                                <template scope="scope"  >
                                    <!--<el-button v-if="!scope.row.flightPlane" type="text" @click="transformToFlightPlane(scope)" style="margin-left: -10px;margin-right: -10px;">生成计划</el-button>-->
                                    <!--<el-button v-if="scope.row.flightPlane" type="text" @click="editFlightPlane(scope.row)" style="margin-right: -10px;">修改</el-button>-->
                                    <el-button  v-if="scope.row.flightPlane&&scope.row.flightPlane.planeRunStatus==DEFINE_STATUS.statusNum.NEW&&scope.row.orderStatus<DEFINE_STATUS.statusNum.THROUGH_AUDIT" type="text" @click="throughAudit(scope)" style="margin-right: -10px;">审核通过</el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                    </el-col>

                </el-row>
            </div>
            <div class="consume-panel">
                <el-row  type="flex" justify="space-around">
                    <el-col :span="24">
                        <el-table :data="importData"  border  :page-size="10" ref="table"  height="350" :cell-class-name="cellClassName"  :row-class-name="rowClass">
                            <el-table-column prop="appoUnit"  header-align="center" label="进港">
                                <el-table-column prop="flightInfo.flightNum" label="航班号" min-width="90px">
                                </el-table-column>
                                <el-table-column prop="flightInfo.flightType" label="机型" min-width="70px">
                                </el-table-column>
                                <el-table-column prop="flightInfo.flightNo" label="机号" min-width="70px">
                                </el-table-column>
                                <el-table-column  prop="estimatedTime" label="安排时间" width="100px" >
                                </el-table-column>
                                <el-table-column  label="预起" min-width="58px">
                                    <template scope="scope">
                                <span>
                                    {{scope.row.flightPlane&&scope.row.flightPlane.takeOffTime?scope.row.flightPlane.takeOffTime.substr(11,5):""}}
                                </span>
                                    </template>
                                </el-table-column>
                                <el-table-column  label="预落" min-width="58px">
                                    <template scope="scope">
                                <span>
                                    {{scope.row.flightPlane&&scope.row.flightPlane.arriveTime?scope.row.flightPlane.arriveTime.substr(11,5):""}}
                                </span>
                                    </template>
                                </el-table-column>
                                <el-table-column  label="是否中转" min-width="80px">
                                    <template scope="scope">
                                <span>
                                    {{scope.row.appProperty=="中转联程"?"是":"否"}}
                                </span>
                                    </template>
                                </el-table-column>
                                <el-table-column  prop="originating" label="出发地" min-width="114px">
                                </el-table-column>
                                <el-table-column prop="destination" label="目的地" min-width="114px">
                                </el-table-column>

                                <el-table-column prop="appoUnit"  label="预约单位" min-width="110">
                                </el-table-column>
                                <el-table-column prop="appoName"  label="预约人" min-width="110">
                                </el-table-column>
                                <el-table-column  prop="appoDate" label="预约时间" min-width="100px" >
                                </el-table-column>
                                <el-table-column  prop="appoPhoneNum" label="联络人电话" min-width="101px" >
                                </el-table-column>
                                <!--<el-table-column  prop="appoPhoneNum" label="优先级"  min-width="70px" >-->
                                    <!--<template scope="scope">-->
                                        <!--{{new Date(scope.row.appoDate).getTime()-new Date(moment().format("YYYY-MM-DD")).getTime()<0?0:(parseInt(new Date(scope.row.appoDate).getTime()-(new Date(moment().format("YYYY-MM-DD"))).getTime())/1000/3600/24 +1)}}-->
                                    <!--</template>-->
                                <!--</el-table-column>-->
                            </el-table-column>
                            <el-table-column label="操作" fixed="right"   width="100px" >
                                <template scope="scope"  >
                                    <!--<el-button v-if="!scope.row.flightPlane" type="text" @click="transformToFlightPlane(scope)" style="margin-left: -10px;margin-right: -10px;">生成计划</el-button>-->
                                    <!--<el-button v-if="scope.row.flightPlane" type="text" @click="editFlightPlane(scope.row)" style="margin-right: -10px;">修改</el-button>-->
                                    <el-button  v-if="scope.row.flightPlane&&scope.row.flightPlane.planeRunStatus==DEFINE_STATUS.statusNum.NEW&&scope.row.orderStatus<DEFINE_STATUS.statusNum.THROUGH_AUDIT" type="text" @click="throughAudit(scope)" style="margin-right: -10px;">审核通过</el-button>
                                    <!--<el-button  type="text" @click="unthroughAudit(scope)" style="margin-right: -10px;">修改</el-button>-->
                                </template>
                            </el-table-column>

                        </el-table>
                    </el-col>
                </el-row>
            </div>
            <!--<el-dialog-->
                    <!--title="预约航班计划修改"-->
                    <!--:visible.sync="flightPlaneEdit"-->
                    <!--ref="flightPlaneEdit"-->
                    <!--&gt;-->
                <!--<enters :parentData="enterData" ref="enters"></enters>-->
             <!--</el-dialog>-->
            <el-dialog
                    title="预约航班计划修改"
                    :visible.sync="appointmentEdit"
                    :width="diawidth"
                    top="5vh"
            >

                <el-form :inline="true" :model="appointment" class="regular-form" ref="appointment" label-width="110px">
                    <el-form-item label="航班号"  prop="flightInfo.flightInfoId":rules
                            ="[ {required: true, message: '航班号不能为空'}]">
                        <el-select v-model="appointment.flightInfo.flightInfoId" filterable placeholder="请选择" @change="handleSelect" >
                            <el-option
                                    v-for="plane in planes"
                                    :key="plane.flightInfoId"
                                    :label="plane.flightNum"
                                    :value="plane.flightInfoId"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机型" >
                        <el-input v-model="flightInfo.flightType" placeholder="机型" :disabled="true" ></el-input>
                    </el-form-item>
                    <el-form-item label="机号" >
                        <el-input v-model="flightInfo.flightNo" placeholder="机型" :disabled="true" ></el-input>
                    </el-form-item>
                    <el-form-item label=" " prop="planeProperty":rules
                            ="[ {required: false, message: '航班性质不能为空'}]" >
                        <!--<el-select v-model="appointment.planeProperty" filterable placeholder="航班性质"  disabled="true">-->
                            <!--<el-option label="预约" value="预约">-->
                            <!--</el-option>-->
                            <!--<el-option label="内部安排" value="内部安排">-->
                            <!--</el-option>-->
                            <!--<el-option  label="批文" value="批文">-->
                            <!--</el-option>-->
                            <!--<el-option label="临时" value="临时">-->
                            <!--</el-option>-->
                        <!--</el-select>-->
                    </el-form-item>
                    <el-form-item label="预约日期"  prop="appoDate":rules
                            ="[ {required: true, message: '预约日期不能为空'}]">
                        <el-date-picker
                                v-model="appointment.appoDate"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy-MM-dd"
                                @change="pickExpectDate"

                        >
                        </el-date-picker>
                    </el-form-item>


                    <el-form-item label="预计安排时间"  prop="estimatedTime":rules
                            ="[ {required: false, message: '预约日期不能为空'}]">
                        <el-date-picker
                                v-model="appointment.estimatedTime"
                                align="right"
                                type="date"
                                placeholder="选择日期"
                                format="yyyy-MM-dd"
                                @change="pickEstimatedTime"

                        >
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item  label="计划起飞时间" prop="flightPlane.takeOffTime":rules
                            ="[ {required: false, message: '计划起飞时间不能为空'}]">
                        <el-date-picker
                                v-model="appointment.flightPlane.takeOffTime"
                                type="datetime"
                                placeholder="计划起飞时间"
                                format="yyyy-MM-dd HH:mm"
                                value-format="yyyy-MM-dd HH:mm"
                        >
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item  label="计划到达时间" prop="flightPlane.arriveTime":rules
                            ="[ {required: false, message: '计划到达时间不能为空'}]" >
                        <el-date-picker
                                v-model="appointment.flightPlane.arriveTime"
                                type="datetime"
                                placeholder="计划到达时间"
                                format="yyyy-MM-dd HH:mm"
                                value-format="yyyy-MM-dd HH:mm"

                        >
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="起始地" prop="originating":rules
                            ="[ {required: true, message: '起始地不能为空'},{max:30,message:'长度不能超过30位'}]">
                        <el-autocomplete
                                class="inline-input"
                                v-model="appointment.originating"
                                :fetch-suggestions="querySearchPlace"
                                placeholder="请输入内容"
                                :disabled="true"
                        >
                        </el-autocomplete>
                    </el-form-item>
                    <el-form-item label="目的地" prop="destination":rules
                            ="[ {required: true, message: '目的地地不能为空'},{max:30,message:'长度不能超过30位'}]">
                        <el-autocomplete
                                class="inline-input"
                                v-model="appointment.destination"
                                :fetch-suggestions="querySearchPlace"
                                placeholder="请输入内容"
                                :disabled="true"
                        >
                        </el-autocomplete>
                    </el-form-item>
                    <el-form-item label="预约单位" >
                        <el-input v-model="appointment.appoUnit" placeholder="预约单位" :disabled="true" ></el-input>
                    </el-form-item>
                    <el-form-item label="预约人" >
                        <el-input v-model="appointment.appoName" placeholder="预约人" :disabled="true" ></el-input>
                    </el-form-item>
                    <el-form-item label=" ">
                        <el-button  type="primary"  @click="confirmEditAppointment">    修改    </el-button>
                        <el-button v-if="!appointment.flightPlane" type="primary"  @click="transformToFlightPlane(currentAppointmentScope)">生成计划</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>

    <messages :parentData="messages"></messages>
</div>


